<template>
    <div class="common-layout">
        <el-container>
        <el-header >Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-scrollbar>
                    <el-menu
                        default-active="2"
                        class="el-menu-vertical"
                        @open="handleOpen"
                        @close="handleClose"
                        @select="handleSelect" 
                    >
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>自定义组件</span>
                            </template> 
                            <el-menu-item index="M0001">首页</el-menu-item>  
                            <el-menu-item index="M0002">上传组件</el-menu-item>
                            <el-menu-item index="M0003">虚拟列表</el-menu-item>
                        </el-sub-menu> 
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-main>
                <router-view v-slot="{ Component }">
                    <component :is="Component" /> 
                </router-view>
            </el-main>
        </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup> 
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const router = useRouter()
const handleSelect = ( key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  // 跳转页面
  router.push({ name: key })
}
</script>
<style lang="less" scoped>
.common-layout .el-header {
  position: relative;
  line-height: 60px;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.common-layout .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.common-layout .el-menu {
  border-right: none;
}
.common-layout .el-main {
  padding: 0;
}
.common-layout .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>